<template>
  <div>
    <card>
      <template slot="content">
        <div class="form-head">
          <el-form class="search-form" size="small">
            <!-- <el-form-item label="应用名称">
              <el-select v-model="searchForm.itemSource" placeholder="请选择">
                <el-option v-for="item in eventSourceArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="菜单名称">
              <el-input v-model="searchForm.menuName" placeholder="菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="层级" prop="menuLevel">
              <el-input v-model="searchForm.menuLevel" placeholder="层级"></el-input>
            </el-form-item>
            <el-button type="primary" plain icon="el-icon-search" @click="onSearch">查询</el-button>
          </el-form>
          <el-button type="primary" icon="el-icon-plus" @click="updateRow({})">添加</el-button>
        </div>
      </template>
    </card>
    <card>
      <el-table ref="table" slot="content" :data="rows" row-key="id" lazy v-loading="loading" :load="handleLoad" :tree-props="{ children: 'menuVOS', hasChildren: 'hasChildren' }">
        <el-table-column v-for="(item, index) in columns" :key="item.prop + index" :prop="item.prop" :label="item.label" :width="item.width">
          <template slot-scope="{ row }">
            <span v-if="item.prop === 'menuType'">
              {{ row.menuType === "108" ? "是" : "否" }}
            </span>
            <span v-else-if="item.prop === 'status'">
              {{ row.status === "1" ? "启用" : "禁用" }}
            </span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" plain="" @click="updateRow(row)">修改</el-button>
            <el-button size="mini" type="primary" plain="" @click="delRow(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </card>
    <updateDialog ref="updateDialog" @success="getTree" :visible.sync="updateDialog.visible" :dialogData="currentRow" :cascaderList="rows"></updateDialog>
  </div>
</template>

<script>
import card from "@/components/card/index.vue";

import * as menuApi from "@/api/uias/menu";
import { workOrderStatus, timeRemaining, workOrderPublicStatus } from "@/utils/filters";
import * as mixins from "@/utils/mixins";
import updateDialog from "./components/updateDialog";

export default {
  name: "organization",
  mixins: [mixins.affirm],
  components: { card, updateDialog },
  filters: { workOrderStatus, timeRemaining, workOrderPublicStatus },
  data() {
    return {
      loading: true,
      rows: [],
      columns: [
        { label: "菜单名称", prop: "menuName", width: "400px" },
        // { label: "所属应用", prop: "complaintTotalNum" },
        { label: "菜单编号", prop: "menuCode" },
        // { label: "菜单父编号", prop: "unApplyNumber" },
        { label: "请求地址", prop: "menuUrl", width: "200px" },
        { label: "排序", prop: "orderby" },
        { label: "层级", prop: "menuLevel" },
        { label: "是否是菜单", prop: "menuType" },
        { label: "状态", prop: "status" },
      ],
      searchForm: {
        itemSource: "",
        menuName: "",
        menuLevel: "",
      },
      eventSourceArr: [],
      updateDialog: {
        visible: false,
      },
      currentRow: {},
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    onSearch() {
      this.getTree();
    },
    getTree() {
      this.loading = true;
      menuApi
        .getListMenu({ ...this.searchForm })
        .then((res) => {
          this.rows = res.result;
        })
        .finally(() => (this.loading = false));
    },

    updateRow(row) {
      this.updateDialog.visible = true;
      this.currentRow = row;
    },

    handleLoad(tree, treeNode, resolve) {},
    delRow(row) {
      this.confirm("确定删除吗？").then(() => {
        menuApi.delMenu({ id: row.id }).then((res) => {
          if (res.result) {
            this.$message.warning(res.result);
          } else {
            this.getTree();
            this.$message.success("删除成功");
          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search-form {
  display: flex;
  width: auto;
  .el-form-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 0;
  }
}
</style>
